<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
<div>
    请输入想要搜索的内容:<input type="text" id="context" name="context" size="50" autocomplete="off">
    <input type="submit" value="搜一下">

    <div id="big" style="width: 366px;border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid;display: none;margin-left: 163px">

    </div>
</div>
</body>

<script>
    $(function () {
       $("#context").keyup(function () {
           var $keyword=$("#context").val();
           if ($keyword!=""){
               $.ajax({
                   url:"SouServlet",
                   type:"POST",
                   dataType:"json",
                   data:{keyword:$keyword},
                   success:function (data) {
                       var $big = $("#big");
                       $big.html("");
                       var $sss = "";
                       if (data.length>0) {
                           $.each(data,function (i,n) {
                               $sss += "<div onmouseover='jingguo(this)' onmouseout='chu(this)' onclick='dian(this)'>";
                               $sss += n;
                               $sss += "</div>"
                               $big.html($sss);
                           })
                           $big.css("display","block");
                       }else{
                           $big.css("display","none");
                       }
                   }

               })
           }
       });
    });

    function jingguo(obj) {
        obj.style.backgroundColor="lightblue";
        obj.style.cursor="pointer";
    }

    function chu(obj) {
        obj.style.backgroundColor="";
    }

    function dian(obj) {
        document.getElementById("context").value=obj.innerHTML;
        document.getElementById("big").style.display="none";
    }

</script>
</html>